<template>
  <div class="table-wrapper">
    <el-table
        :data="data"
        :fit="true"
        @sort-change="$emit('sort-change', $event)"
    >
      <template v-for="col in columns" :key="col.prop">
        <el-table-column v-bind="col">
          <!-- <template #default="scope" v-if="col.prop === 'progress'">
            <progress-bar
              :percentage="scope.row.progress"
              :status="scope.row.status"
            />
          </template>
          <template #default="scope" v-else-if="col.prop === 'status'">
            <status-tag :status="scope.row.status" />
          </template> -->
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup>
import {chapterTableColumns} from '../const'
import ProgressBar from './ProgressBar.vue'
import StatusTag from './StatusTag.vue'

defineProps({
  data: {
    type: Array,
    required: true
  },
  columns: {
    type: Array,
    default: () => chapterTableColumns
  }
})

defineEmits(['sort-change'])
</script>

<style scoped>
.table-wrapper {
  margin: 16px 16px 16px 50px; /* 上 右 下 左 */
}


:deep(.el-table) {
  background-color: transparent;

  .el-table__row:hover > td {
    background-color: #F8F9FB !important;
  }

  .el-table__header-wrapper th {
    background-color: #F8F9FB !important;
    color: #606266;
    font-weight: 500;
    height: 45px;
    border-bottom: 1px solid #EBEEF5;
  }

  .el-table__row {
    height: 40px;
    border-bottom: 1px solid #EBEEF5;
  }
}

/* 添加左侧树形连接线 */
.table-wrapper::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #E4E7ED;
}

/* 隐藏水平滚动条 */
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden !important;
}

/* 调整表格布局 */
:deep(.el-table__cell) {
  white-space: nowrap;
}

:deep(.el-table__header-wrapper th) {
  background-color: #EBEEF5 !important;
  color: #606266;
  font-weight: 500;
  height: 40px;
}

:deep(.el-table__row) {
  height: 40px;
  background-color: #FFFFFF !important;
}
</style>
